<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>添加任务</title>
    <!-- 1导入css -->
    <!-- <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet"> -->
    <!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> -->
    <link href="./css/elementUi.css" rel="stylesheet">
    <script src="./js/vue@2.6.js"></script>
    <!--  引入ElementUI组件 -->
    <script src="./js/element-ui.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/dayjs.min.js"></script>

    <style>
        .wh_table {
            width: 95%;
            margin: 0 auto;
            color: #002161;
        }

        .title_wh {
            text-align: center;
            font-size: 48px;
            letter-spacing: 5px;
            margin: 20px 0;
            font-family: STZhongsong;
            font-weight: bold;
        }

        .date-label {
            width: 100px;
            text-align: center;
            border-right: 1px solid #000;
            font-weight: bold;
        }

        .date-value {
            width: 280px;
            text-align: center;
            color: #FFFF00;
            font-weight: bold;
        }

        .el-table {
            color: #000;
            font-size: 18px;
        }

        .dateTime {
            background: #00B050;
            /* padding: 15px; */
            height: 45px;
            line-height: 45px;
            display: flex;
            border: 1px solid #000;
            width: 380px;
            margin-left: auto;
            /* width: 350px; */
        }

        .el-table thead.is-group th {
            padding: 6px 0;
        }

        .proiect_add {
            /* margin-left: auto; */
            text-align: right;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wh_table">
            <h1 class="title_wh">山西万鸿科技有限公司项目进度展示板</h1>
            <div class="proiect_add">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="adddPro">添加任务</el-button>

            </div>
            <!-- <div class="dateTime">
                <div class="date-label">
                    当前日期:
                </div>
                <div class="date-value">
                    {{ts}}
                </div>
            </div> -->
            <el-table ref="rolltable" :data="tableData" border style="width: 100%" :header-cell-style="{color:'#000'}"
                height="70vh" :cell-style="taskStatus">
                <!-- <el-table-column type="selection" width="55">
                </el-table-column> -->
                <el-table-column type="index" label="序号" width="80" align="center" header-align="center">
                </el-table-column>
                <el-table-column prop="date" label="项目" header-align="center">
                    <el-table-column prop="pName" label="名称" width="200" align="left" header-align="center">
                    </el-table-column>
                    <el-table-column prop="pLeader" label="负责人" width="100" align="left" header-align="center">
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="date" label="任务" header-align="center">
                    <el-table-column prop="name" label="名称" align="left" header-align="center">
                    </el-table-column>
                    <el-table-column prop="leader" label="负责人" width="200" align="left" header-align="center">
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="date" label="实施日期" header-align="center">
                    <el-table-column prop="beginTime" label="开始日期" width="180" align="left" header-align="center">
                    </el-table-column>
                    <el-table-column prop="endTime" label="结束日期" width="180" align="left" header-align="center">
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="duration" label="工期(日)" width="100" align="center" header-align="center">
                    <template slot-scope="scope">
                        <span style="font-weight: bold;">
                            {{scope.row.duration}}
                        </span>
                    </template>
                </el-table-column>
                </el-table-column>
                <el-table-column prop="remainingDuration" label="剩余工期(日)" align="center" width="100"
                    header-align="center">
                    <template slot-scope="scope">
                        <span style="font-weight: bold;">
                            {{scope.row.remainingDuration}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" header-align="center" width="220">
                    <template slot-scope="scope">
                        <el-button size="small" @click.native.prevent="deleteRow(scope.row)" icon="el-icon-check
                        " type="success"> 完成</el-button>
                        <el-button size="small" @click.native.prevent="editRow(scope.row)" icon="el-icon-edit"
                            type="warning"> 编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="titles" :close-on-click-modal="false" :visible.sync="dialogVisible" width="600px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="项目名称" prop="projectId">
                    <el-select v-model="ruleForm.projectId" placeholder="请选择" style="width:100%">
                        <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id
                        "></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务名称" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 8}"
                        type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="任务负责人" prop="leader">
                    <el-select multiple filterable remote reserve-keyword :remote-method="remoteMethod"
                        v-model="ruleForm.leader" placeholder="请选择" style="width:100%">
                        <el-option v-for="item in personnelList" :label="item.label" :key="item.value" :value="item.value
                        "></el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="实施日期">
                    <el-col :span="11">
                        <el-form-item prop="beginTime">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.beginTime"
                                style="width: 100%; "></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="endTime">
                            <el-date-picker type="date" :picker-options="pickerOptions" placeholder="选择日期"
                                v-model="ruleForm.endTime" style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                    <el-input v-model="ruleForm.remark" placeholder="没有结束日期则必填" :autosize="{ minRows: 2, maxRows: 4}"
                        type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="动态密码" prop="DynamicKey" v-if="titles=='编辑'">
                    <el-input v-model="ruleForm.DynamicKey" placeholder="请输入动态密码" type="text"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script>
    // const dayjs = require("dayjs");
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                titles: '',
                ruleForm: {
                    projectId: '',
                    name: '',
                    leader: [],
                    beginTime: '',
                    endTime: '',
                    remark: '',
                    DynamicKey: ""
                },
                remoteList: [],
                personnelList: [{
                    label: '张江',
                    value: '张江'
                }, {
                    label: '闫宏建',
                    value: '闫宏建'
                }, {
                    label: '樊艳军',
                    value: '樊艳军'
                }, {
                    label: '程红阳',
                    value: '程红阳'
                }, {
                    label: '段海峰',
                    value: '段海峰'
                }, {
                    label: '冯康',
                    value: '冯康'
                }, {
                    label: '李豪',
                    value: '李豪'
                }, {
                    label: '李建伟',
                    value: '李建伟'
                }, {
                    label: '梁亚斌',
                    value: '梁亚斌'
                }, {
                    label: '刘梦扬',
                    value: '刘梦扬'
                }, {
                    label: '师瑜江',
                    value: '师瑜江'
                }, {
                    label: '宋星廷',
                    value: '宋星廷'
                }, {
                    label: '苏晓海',
                    value: '苏晓海'
                }, {
                    label: '张帅',
                    value: '张帅'
                }, {
                    label: '李文艳',
                    value: '李文艳'
                }, {
                    label: '冷敏',
                    value: '冷敏'
                }, {
                    label: '王宾宾',
                    value: '王宾宾'
                }, {
                    label: '武云杰',
                    value: '武云杰'
                }, {
                    label: '杨金艳',
                    value: '杨金艳'
                }, {
                    label: '张斌',
                    value: '张斌'
                }, {
                    label: '张晋宁',
                    value: '张晋宁'
                }, {
                    label: '赵水连',
                    value: '赵水连'
                }, {
                    label: '李宗磐',
                    value: '李宗磐'
                }, {
                    label: '王雪峰',
                    value: '王雪峰'
                }, {
                    label: '武炳森',
                    value: '武炳森'
                }, {
                    label: '岳利强',
                    value: '岳利强'
                }, {
                    label: '赵慧斌',
                    value: '赵慧斌'
                }, {
                    label: '杜盼盼',
                    value: '杜盼盼'
                }, {
                    label: '刘涵',
                    value: '刘涵'
                }, {
                    label: '王荣程',
                    value: '王荣程'
                }],
                pickerOptions: {
                    disabledDate: (time) => {
                        return time.getTime() < new Date(this.ruleForm.beginTime).getTime()
                    }
                },
                ts: "",
                rolltimer: null,
                urls: "http://192.168.0.19:8011",
                tableData: [],
                rowData:{},
                dialogVisible: false,
                projectList: [],
                rules: {
                    name: [{
                        required: true,
                        message: '请输入任务名称',
                        trigger: 'blur'
                    },
                        // {
                        //     min: 3,
                        //     max: 18,
                        //     message: '长度在 3 到 18 个字符',
                        //     trigger: 'blur'
                        // }
                    ],
                    leader: [{
                        required: true,
                        message: '请输入任务负责人名称',
                        trigger: 'blur'
                    },
                        // {
                        //     min: 3,
                        //     max: 18,
                        //     message: '长度在 3 到 18 个字符',
                        //     trigger: 'blur'
                        // }
                    ],
                    projectId: [{
                        required: true,
                        message: '请选择项目名称',
                        trigger: 'change'
                    }],
                    DynamicKey: [{
                        required: true,
                        message: '请输入动态密码',
                        trigger: 'change'
                    }]
                    // beginTime: [{
                    //     type: 'date',
                    //     required: true,
                    //     message: '请选择开始日期',
                    //     trigger: 'change'
                    // }],
                    // endTime: [{
                    //     type: 'date',
                    //     required: true,
                    //     message: '请选择结束时间',
                    //     trigger: 'change'
                    // }]
                }
            }
        },
        methods: {
            remoteMethod(query) {
                if (query !== '') {
                    this.personnelList = this.remoteList.filter(item => {
                        return item.label
                            .indexOf(query) > -1;
                    });
                } else {
                    // this.personnelList = this.remoteList;
                }
            },

            //添加任务
            adddPro() {
                this.titles = '添加任务'
                this.dialogVisible = true
            },
            submitForm(formName) {
                let vm = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.titles == '添加任务') {
                            $.ajax({
                                url: this.urls + '/addtask',
                                data: JSON.stringify({
                                    ...vm.ruleForm,
                                    leader: vm.ruleForm.leader.join('，'),
                                    beginTime: vm.ruleForm.beginTime ? dayjs(vm.ruleForm.beginTime).format(
                                        'YYYY-MM-DD') : "",
                                    endTime: vm.ruleForm.endTime ? dayjs(vm.ruleForm.endTime).format(
                                        'YYYY-MM-DD') : "",
                                }),
                                type: "post",
                                contentType: 'application/json',
                                success: function (data) {
                                    vm.$message({
                                        type: 'success',
                                        message: '添加成功!'
                                    });
                                    vm.resetForm('ruleForm')
                                    vm.dialogVisible = false
                                    vm.getalltask()
                                },
                                error:function(err){
                                    console.log(err)
                                    vm.$message({
                                        type: 'error',
                                        message: err.responseText || '发生错误'
                                    });
                                },
                                dataType: "json"
                            });
                        }else{
                             
                            $.ajax({
                                url: this.urls + '/updtask',
                                data: JSON.stringify({
                                    ...vm.ruleForm,
                                    id:vm.rowData.id,
                                    leader: vm.ruleForm.leader.join('，'),
                                    beginTime: vm.ruleForm.beginTime ? dayjs(vm.ruleForm.beginTime).format(
                                        'YYYY-MM-DD') : "",
                                    endTime: vm.ruleForm.endTime ? dayjs(vm.ruleForm.endTime).format(
                                        'YYYY-MM-DD') : "",
                                }),
                                type: "post",
                                contentType: 'application/json',
                                success: function (data) {
                                    vm.$message({
                                        type: 'success',
                                        message: '添加成功!'
                                    });
                                    vm.resetForm('ruleForm')
                                    vm.dialogVisible = false
                                    vm.getalltask()
                                },
                                error:function(err){
                                    console.log(err)
                                    vm.$message({
                                        type: 'error',
                                        message: err.responseText || '发生错误'
                                    });
                                },
                                dataType: "json"
                            });
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            dayzero(day) {
                if (day < 10) {
                    return '0' + day
                }
                return day
            },
            displayDate() {
                let today = new Date();
                let year = today.getFullYear();
                let month = today.getMonth() + 1;
                let day = today.getDate();
                let weekDay = today.getDay();
                let hour = today.getHours();
                let minute = today.getMinutes();
                let second = today.getSeconds();
                let weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                let date = year + "年" + this.dayzero(month) + "月" + this.dayzero(day) + "日" + weekDays[
                    weekDay] + " " + this.dayzero(hour) + ":" +
                    this.dayzero(minute) + ":" + this.dayzero(second);
                this.ts = date
                // document.getElementById("dateDisplay").innerHTML = date;
            },
            startScroll() {
                this.tableScroll(false);
            },
            editRow(row) {
                this.rowData = row
                let vm = this;
                //编辑
                this.titles = '编辑'
                this.ruleForm = row//赋值
                this.ruleForm.leader = row.leader.split(',')
                this.ruleForm.projectId = Number(row.pId)
                // console.log(row.beginTime);
                // console.log(dayjs(row.beginTime).format('YYYY-MM-DD'));
                this.ruleForm.beginTime = row.beginTime2
                this.ruleForm.endTime = row.endTime2
                this.dialogVisible = true




                // "2023-11-21"          
                //console.log(this.ruleForm)

            },
            deleteRow(row) {
                let vm = this;
                this.$confirm('您是否继续操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        url: this.urls + '/complete/' + row.id,
                        data: {
                            // action: "jQueryAjax"
                        },
                        type: "post",
                        success: function (data) {
                            vm.getalltask()
                            vm.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                        },
                        dataType: "json"
                    });
                })

            },
            //停止滚动移入
            stopScroll() {
                this.tableScroll(true);
            },
            tableScroll(stop) {
                if (stop) {
                    window.clearInterval(this.rolltimer)
                    return false;
                }
                const table = this.$refs.rolltable
                const divData = table.bodyWrapper
                this.rolltimer = window.setInterval(() => {
                    divData.scrollTop += 1
                    if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
                        if (table.tableData.length > 5) {
                            divData.scrollTop = 0
                        }
                    }
                }, 50)
            },
            //颜色标识
            taskStatus({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (row.remainingDuration < 0 && column.label == '剩余工期(日)') {
                    return 'background:#FF0000;color:#fff'
                } else if (row.remainingDuration >= 5 && column.label == '剩余工期(日)') {
                    return 'background:#00B050;color:#fff'
                } else if (row.remainingDuration < 5 && column.label == '剩余工期(日)') {
                    return 'background:#FF7433;color:#fff'
                }
            },
            //获取项目列表
            getProject() {
                $.ajax({
                    url: this.urls + '/allproject',
                    data: {
                        // action: "jQueryAjax"
                    },
                    type: "GET",
                    success: function (data) {
                        if (data.length > 0) {
                            // dayjs(data[0].endTime).format('YYYY年MM月DD日')
                            vm.projectList = data
                        }
                    },
                    dataType: "json"
                });
            },
            //获取任务
            getalltask() {
                let vm = this;
                $.ajax({
                    url: this.urls + '/alltask',
                    data: {
                        // action: "jQueryAjax"
                    },
                    type: "GET",
                    success: function (data) {
                        //console.log(1, data)
                        if (data.length > 0) {
                            data.forEach(item => {
                                item.endTime2 = item.endTime
                                item.beginTime2 = item.beginTime
                                item.endTime = item.endTime ? dayjs(item.endTime).format('YYYY年MM月DD日') : item.remark
                                item.beginTime = item.beginTime ? dayjs(item.beginTime).format('YYYY年MM月DD日') : "-"
                            });
                            vm.tableData = data
                        }
                    },
                    dataType: "json"
                });
            }
        },
        mounted() {

            this.remoteList = this.personnelList.map(item => {
                return {
                    value: item.value,
                    label: item.label
                };
            });
            //自动滚动
            // this.tableScroll()
            //获取实时日期
            this.displayDate()
            setInterval(this.displayDate, 1000);
            //请求数据
            this.getalltask()
            //获取任务列表
            this.getProject()
        }
    });
</script>

</html>